﻿@model Model.RoomsModel
@{
    ViewData["Title"] = "AddRoomview";

}

<link href="~/css/bootstrap.css" rel="stylesheet" />
<script src="~/js/axios.min.js"></script>
<script src="~/js/vue.js"></script>
<script src="~/js/qs.min.js"></script>
<h3 style="color:burlywood">新增客房类型</h3>
<div class="container" id="app">
    <table class="table table-bordered">
        <tr>
            <td><span class="text_red" style="color:red;">*</span>&nbsp;客房名称</td>
            <td><input id="name" type="text" placeholder="请输入名称"></td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;客房类型</td>
            <td>
                <select id="style" class="table-bordered">
                    <option v-for="item in r" v-bind:value="item.rtid">{{item.rTname}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><span class="text_red" style="color:red">*</span>&nbsp;客房价格</td>
            <td><input id="price" type="text" placeholder="请输入价格"></td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;客房状态</td>
            <td>
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>已入住
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option2">未入住
            </td>
        </tr>
        <tr>
            <td><span class="text_red" style="color:red">*</span>&nbsp;客房电话</td>
            <td><input id="tel" type="text" placeholder="请输入电话"></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" v-on:click="AddHob" value="保存" class="btn btn-success">
                <input type="button" v-on:click="changeActive" value="取消" class="btn btn-danger">
            </td>
        </tr>
    </table>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                r: []
            }

        },
        mounted: function () {        //页面加载成功的事件
            //设置请求路径
            axios
                .get("/Room/RoomsType")
                .then(res => (this.r = res.data))
                .catch(function (error) {
                    console.log(error);
                });
        },
        methods: {
            AddHob: function () {
                var obj = {};
                obj.Rname = $("#name").val();
                obj.RTname = $("#style").val();
                obj.Rprice = $("#price").val();
                obj.Rstate = $("#optionsRadios1").val();
                obj.Rtel = $("#tel").val();
                axios
                    .post("/Room/AddRoom", window.Qs.stringify(obj))
                    .then(
                        function (i) {
                            if (i.data > 0) {
                                alert("添加成功");
                                location.href = '/Room/RoomsShow';
                            }
                            else {
                                alert("添加失败");
                            }
                        }
                    )
            }
        }

    })
</script>

